Tag-based computer languages, such as Hypertext Markup Language (HTML), Extensible Markup Language (XML), and the like are used to implement various different computer-based applications, such as Web pages, database administration, and the like. One of the powerful features of such tag-based languages is the ability to create hierarchical documents. A Web page is an example of a hierarchical document. Outer structural groupings, such as paragraphs, tables, and the like, may contain child elements, whether structural or stylistic, that continue to define the look and feel of the Web page. Similarly, an XML document, as a hierarchical document, may define sets of records in which a parent element or data may contain child elements or data that describes the overall content of the data, as opposed to describing the appearance of the data as HTML does. Other computer or scripting languages, such as NETSCAPE COMMUNICATIONS CORPORATION's JAVASCRIPTT™, MICROSOFT CORPORATION's C#™, and the like, also may be used in developing hierarchical documents.
Hierarchical documents are very flexible and may be easily organized or abstracted into tree structures, such as a Document Object Model (DOM), that can then be used for further processing or analysis. Because of their highly organized structures, additional code or scripts may be applied to such hierarchical documents to perform additional functions, such as defining a display format or transforming the format of hierarchical document, or the like. For example, style sheet formatting, such as Cascading Style Sheet (CSS) rules, may be applied to HTML or XML documents to define the display formatting of the HTML as displayed in a Web browser. Moreover, Extensible Style sheet Language for Transformation (XSLT) scripts may be applied to XML documents to transform the content format of the document into a new content format.
The ability to use such secondary code, such as CSS and XSLT, to operate on hierarchical documents increases the flexibility, reusability, and extensibility of such documents. However, to effectively design, edit, and modify such hierarchical documents that make use of such secondary code, it is helpful for the developer to understand how this secondary code affects or controls the underlying content during the editing process. Such secondary code is typically governed by complex syntax and application rules that may only be understandable or even familiar to experienced developers. Existing tools that operate with such documents generally do not inform developers about each of the applicable rules of the secondary code that applies to any particular piece of content in the underlying document while the developer is editing the code or source of the document. Thus, a developer may not be able to easily find how a piece of content will be affected in the final operating version.
One example of such application is found in Web development environments. In creating Web pages in HTML, existing Web development environments provide CSS editors that assist the user in creating style sheet rules to be applied to the edited HTML document. CSS uses a complex syntax in which some defined formatting rules may apply to certain elements of the Web page even though the CSS rule is not directly applied to that element. Typically, only experienced developers choose to code Web pages with CSS because of the complexity of CSS syntax. In some existing Web development environments, however, features are provided that assist the developer determine what CSS rules apply to various different tags or markup. These rule inspectors may display the CSS rules that directly apply to an element being examined by a developer or may merely present the actual computed values of a particular property. While this information is useful, it may not tell the developer all of the information that may be useful in the editing process.
For example, NETSCAPE COMMUNICATIONS CORPORATION's MOZILLA™ family of Web browsers offer the DOM Inspector™ feature which allows a developer to view the DOM of a Web page, select an element from the DOM and then view the CSS rules that directly apply to that element in order of cascade priority. The DOM Inspector™ also shows the actual computed values for the attributes within the selected element. Still other applications, such as BRADBURY SOFTWARE LLC's TOPSTYLE™ CSS editor, provides a property inspector to the developer that lists the properties that are set in the CSS rule and the ones that are not. However, the function of TOPSTYLE™ is separate from the HTML document that the CSS rule may modify. Thus, using existing technology, it may be difficult for a developer to determine what rule or code applies to a particular element in the hierarchical document.